<template>
  <div class="search-box">
    <a-form layout="inline">
      <a-form-item class="form-item" v-bind="validateInfos.name">
        <a-input v-model:value="searchForm.name" placeholder="请输入属性显示名" />
      </a-form-item>
      <a-form-item class="form-btns">
        <a-button type="primary" @click.prevent="onSubmit">查询</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
const emit = defineEmits<(e: 'search', params: TABLE_PARAMS.PropertyRequestData) => void>()
const searchForm = reactive<TABLE_PARAMS.PropertyRequestData>({
  name: ''
})

const rulesRef = reactive({
  name: [
    {
      pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{0,128}$/,
      message: '只允许输入汉字、字母、数字和下划线，长度在128个字符之内'
    }
  ]
})

const { validate, validateInfos } = Form.useForm(searchForm, rulesRef, {})

// 查询
const onSubmit = () => {
  validate().then(() => {
    nextTick(() => {
      emit('search', {
        ...toRaw(searchForm)
      })
    })
  })
}

onMounted(() => {
  onSubmit()
})
</script>
